<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    @ok="handleCancel"
    @cancel="handleCancel">

    <div v-show="type===1" style="color:#fff;margin-bottom: 20px;">采集端正在注册正样本，请耐心等待...</div>
    <div v-show="type===2"  style="color:#fff;margin-bottom: 20px;">采集端正在注册故障，请耐心等待...</div>
    <div v-show="type===3"  style="color:#fff;margin-bottom: 20px;">采集端正在向服务器上报模型，请耐心等待....</div>

    <a-progress
      :percent="percent"
      :strokeWidth="15"
      :showInfo="false"
      status="active"
      :stroke-color="color"/>

    <div class="text">大约需要5到8分钟</div>

  </a-modal>

</template>

<script>
  import { queryTask } from '@/api/modular/main/bizcollectionsamplemanage/bizCollectionSampleManageManage'

  export default {
    data () {
      return {
        visible: false,
        remoteTaskInterval: null,
        gatewayId: 0,
        taskId: 0,
        percent: 0,
        genre: 0,
        msg: '',
        color: {
          from: '#65FFE9',
          to: '#008AFF'
        },
        title: '',
        type:0
      }
    },
    methods: {
      // 初始化方法
      init (record) {
        this.percent = 0
        this.gatewayId = record.gatewayId
        this.taskId = record.taskId
        this.visible = true
        if (!!record.type) {
          this.type = record.type
          switch (record.type) {
            case 1:
              this.msg = '正样本注册'
              this.title = '注册正样本'
              break
            case 2:
              this.msg = '故障注册'
              this.title = '注册故障'
              break
            case 3:
              this.msg = '同步模型'
              this.title = '同步模型'
              break
          }
        }
        this.handleProgress()
        this.handleRemoteTask()
      },
      handleProgress () {
        setInterval(() => {
          if (parseInt(this.percent) <= 10) {
            this.color = {
              from: '#d22d1f',
              to: '#f7cb45'
            }
          } else if (parseInt(this.percent) <= 80) {
            this.color = {
              from: '#f7cb45',
              to: '#6ad842'
            }
          } else {
            this.color = {
              from: '#6ad842',
              to: '#6ad842'
            }
          }
          if (parseInt(this.percent) <= 60) {
            this.percent = parseFloat(this.percent) + (Math.random() * 3 + 5) / 10
          } else if (parseInt(this.percent) <= 90) {
            this.percent = parseFloat(this.percent) + (Math.random() * 2 + 3) / 10
          } else {
            this.percent = parseFloat(this.percent) + 0.001
          }
        }, 100)
      },
      // 查询远程任务的响应情况
      handleRemoteTask () {
        let maxCount = 80
        let count = 1
        this.remoteTaskInterval = setInterval(() => {
          count++
          if (count >= maxCount) {
            // 超时处理
            this.$message.error('采集端响应超时！')
            clearInterval(this.remoteTaskInterval)
            this.visible = false
          } else {
            let param = {
              gatewayId: this.gatewayId,
              taskId: this.taskId
            }
            let that = this
            queryTask(param).then(res => {
              if (res.success) {
                if (res.data !== null) {
                  this.percent = 100
                  if (res.data.code === 200) {
                    // 成功
                    this.$message.success(this.msg + '成功！')
                    clearInterval(that.remoteTaskInterval)
                  } else {
                    // 失败
                    this.$message.error(this.msg + '失败：' + res.data.msg)
                    clearInterval(that.remoteTaskInterval)
                  }
                  this.visible = false
                }
              }
            })
          }
        }, 6000)
      },
      handleCancel () {
        this.gatewayId = 0
        this.taskId = 0
        clearInterval(this.remoteTaskInterval)
        this.visible = false
      }
    }
  }

</script>
<style scoped>
  .text {
    display: inline-block;
    margin-top: 15px;
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #17EBFF;
  }
</style>